<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-01-06 17:19:38
 * @LastEditors: CNN 969682281@qq.com
 * @LastEditTime: 2023-06-07 13:59:52
 * @FilePath: \mould\src\components\public\ConsumptionCharts.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="com-container" style="fontsize: 12px">
    <div
      class="com-chart com-charts"
      ref="echarts"
      style="z-index: 555; position: relative"
    ></div>
  </div>
</template>
  
<script>
export default {
  props: ["commonData", "time1", "time2", "checkType"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      xData: null,
      seriesData: null,
      dataOption: null,
    };
  },
  watch: {
    commonData: {
      handler(newVal) {
        if (newVal) {
          this.allData = newVal;
          this.getData();
        }
      },
      immediate: true,
    },
    checkType: {
      handler(newVal) {
        if (newVal) {
          this.xData = newVal;
          this.getData();
        }
      },
      immediate: true,
    },

    time1: function () {},
    time2: function () {},
  },

  mounted() {
    setTimeout(() => {
      this.initChart();
      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 500);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);

      var option = {
        title: {
          left: "center",
        },

        grid: {
          left: "5%",
          right: "5%",
          bottom: "12%",
          top: "13%",
          containLabel: true,
        },
        legend: {
          left: "center",
          top: "5%",
          icon: "roundRect",
          textStyle: {
            color: "#90979c",
          },
        },

        calculable: true,
        xAxis: [
          {
            type: "category",

            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#9D9EA0",
              },
            },
            splitLine: {
              //坐标轴在 grid 区域中的分隔线。
              show: false,
              lineStyle: {
                color: "#DEDEDE",
              },
            },
            // data: xData,
          },
        ],

        yAxis: [
          {
            type: "value",
            name: "kg",

            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#9D9EA0",
              },
            },
            splitLine: {
              //坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                color: "#DEDEDE",
                type: "dotted",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#9D9EA0",
              },
            },
          },
        ],

        dataZoom: [
          {
            show: true,
            height: 10,
            xAxisIndex: [0],
            bottom: 60,

            start: 10,
            end: 80,
            // handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            // handleSize: '110%',
            // handleStyle: {
            //     color: "#5B3AAE",
            // },
            // textStyle: {
            //     color: "rgba(204,187,225,0.5)",
            // },
            // fillerColor: "rgba(67,55,160,0.4)",
            // borderColor: "rgba(204,187,225,0.5)",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    getData() {
      var data = this.allData.data;
      var type = this.xData;
      var gravel1Value = []; // 仓碎石1
      var gravel2Value = []; // 仓碎石2
      var gravel3Value = []; // 仓碎石3
      var gravel4Value = []; // 仓碎石4
      var gravel5Value = []; // 仓碎石5
      var gravel6Value = []; // 仓碎石5
      var asphaltValue = []; // 沥青
      var oreValue = []; // 矿粉
      var xData = [];
      if (data) {
        data.map((i) => {
          xData.push(i.dischargeDates);

          gravel1Value.push(
            i.gravel1Value //仓碎石1
          );
          gravel2Value.push(
            i.gravel2Value //仓碎石2
          );
          gravel3Value.push(
            i.gravel3Value //仓碎石3
          );
          gravel4Value.push(
            i.gravel4Value //仓碎石4
          );
          gravel5Value.push(
            i.gravel5Value //仓碎石5
          );
          gravel6Value.push(
            i.gravel6Value //仓碎石6
          );
          asphaltValue.push(
            i.asphaltValue //沥青
          );
          oreValue.push(
            i.oreValue //矿粉
          );
        });
      }

      var that = this;

      setTimeout(() => {
        if (type && data) {
          that.updateChart(
            type,
            xData,
            data,
            gravel1Value,
            gravel2Value,
            gravel3Value,
            gravel4Value,
            gravel5Value,
            gravel6Value,
            asphaltValue,
            oreValue
          );
        }
      }, 500);
    },
    updateChart(
      type,
      xData,
      data,
      data1,
      data2,
      data3,
      data4,
      data5,
      data6,
      data7,
      data8
    ) {
      var seriesTotal = [
        {
          name: "仓碎石1",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#96EDD3",
          },
          data: data1,
        },
        {
          name: "仓碎石2",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#59939A",
          },
          data: data2,
        },
        {
          name: "仓碎石3",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#B1BAAC",
          },
          data: data3,
        },
        {
          name: "仓碎石4",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#DBA390",
          },
          data: data4,
        },
        {
          name: "仓碎石5",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#FFC87D",
          },
          data: data5,
        },
        {
          name: "仓碎石6",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#DB99C6",
          },
          data: data6,
        },
        {
          name: "沥青",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#9BBD9B",
          },
          data: data7,
        },
        {
          name: "矿粉",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#595F6A",
          },
          data: data8,
        },

        {
          name: "全选",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#778CCD",
          },
        },
        {
          name: "全不选",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#D0E3FC",
          },
        },
      ];

      this.seriesData = seriesTotal;
      var that = this;
      var dataOption = {
        title: {
          text:
            this.time1.substr(0, 10) +
            "至" +
            this.time2.substr(0, 10) +
            "材料用量分析图",
        },
        legend: {
          data: [
            "全选",
            "全不选",
            "仓碎石1",
            "仓碎石2",
            "仓碎石3",
            "仓碎石4",
            "仓碎石5",
            "仓碎石6",
            "矿粉",
            "沥青",
          ],
          selected: this.checkType,
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            var str = "";
            str =
                "出料时间:" +
                data[params.dataIndex].dischargeDates +
                "<br/>" +
              params.seriesName + ":" + params.value + "(kg)";

            return str;
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: true,
              lang: [
                this.time1.substr(0, 10) +
                  "至" +
                  this.time2.substr(0, 10) +
                  "材料用量分析图",
                "关闭",
              ],
              optionToContent: function (opt) {
                var series = opt.series;
                var str = "";
                var legend = [
                  "仓碎石1",
                  "仓碎石2",
                  "仓碎石3",
                  "仓碎石4",
                  "仓碎石5",
                  "仓碎石6",
                  "矿粉",
                  "沥青",
                ];
                var s = [];
                legend.map((item) => {
                  if (that.checkType[item] == true) {
                    s.push(item);
                  }
                });

                s.map((item) => {
                  str += "<td>" + item + "</td>";
                });
                var table =
                  `<table class="echartsTable"><tbody><tr>` +
                  //   "<td >工程名称</td>" +
                  //   "<td >工程部位</td>" +
                  //   "<td >实际方量</td>" +
                  //   "<td >强度等级</td>" +
                  str +
                    "<td >出料时间</td>" +
                  "</tr>";
                var lineData = [];
                series.map((item) => {
                  s.map((i) => {
                    if (item.name == i) {
                      lineData.push(item);
                    }
                  });
                });

                for (var i = 0, l = data.length; i < l; i++) {
                  if (s.length == 0) {
                    table +=
                      "<tr>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringPartName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_ActualCalculation +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_StrengthGrade +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].dischargeDates +
                      //   "</td>" +
                      "</tr>";
                  } else if (s.length == 1) {
                    table +=
                      "<tr>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringPartName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_ActualCalculation +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_StrengthGrade +
                      //   "</td>" +
                      "<td >" +
                      lineData[0].data[i] +
                      "</td>" +
                        "<td>" +
                        data[i].dischargeDates +
                        "</td>" +
                      "</tr>";
                  } else if (s.length == 2) {
                    table +=
                      "<tr>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringPartName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_ActualCalculation +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_StrengthGrade +
                      //   "</td>" +
                      "<td >" +
                      lineData[0].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[1].data[i] +
                      "</td>" +
                        "<td>" +
                        data[i].dischargeDates +
                        "</td>" +
                      "</tr>";
                  } else if (s.length == 3) {
                    table +=
                      "<tr>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringPartName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_ActualCalculation +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_StrengthGrade +
                      //   "</td>" +
                      "<td >" +
                      lineData[0].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[1].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[2].data[i] +
                      "</td>" +
                        "<td>" +
                        data[i].dischargeDates +
                        "</td>" +
                      "</tr>";
                  } else if (s.length == 4) {
                    table +=
                      "<tr>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringPartName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_ActualCalculation +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_StrengthGrade +
                      //   "</td>" +
                      "<td >" +
                      lineData[0].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[1].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[2].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[3].data[i] +
                      "</td>" +
                        "<td>" +
                        data[i].dischargeDates +
                        "</td>" +
                      "</tr>";
                  } else if (s.length == 5) {
                    table +=
                      "<tr>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringPartName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_ActualCalculation +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_StrengthGrade +
                      //   "</td>" +
                      "<td >" +
                      lineData[0].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[1].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[2].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[3].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[4].data[i] +
                      "</td>" +
                        "<td>" +
                        data[i].dischargeDates +
                        "</td>" +
                      "</tr>";
                  } else if (s.length == 6) {
                    table +=
                      "<tr>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringPartName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_ActualCalculation +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_StrengthGrade +
                      //   "</td>" +
                      "<td >" +
                      lineData[0].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[1].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[2].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[3].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[4].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[5].data[i] +
                      "</td>" +
                        "<td>" +
                        data[i].dischargeDates +
                        "</td>" +
                      "</tr>";
                  } else if (s.length == 7) {
                    table +=
                      "<tr>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringPartName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_ActualCalculation +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_StrengthGrade +
                      //   "</td>" +
                      "<td >" +
                      lineData[0].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[1].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[2].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[3].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[4].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[5].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[6].data[i] +
                      "</td>" +
                        "<td>" +
                        data[i].dischargeDates +
                        "</td>" +
                      "</tr>";
                  } else if (s.length == 8) {
                    table +=
                      "<tr>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_EngineeringPartName +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_ActualCalculation +
                      //   "</td>" +
                      //   "<td>" +
                      //   data[i].F_StrengthGrade +
                      //   "</td>" +
                      "<td >" +
                      lineData[0].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[1].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[2].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[3].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[4].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[5].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[6].data[i] +
                      "</td>" +
                      "<td >" +
                      lineData[7].data[i] +
                      "</td>" +
                        "<td>" +
                        data[i].dischargeDates +
                        "</td>" +
                      "</tr>";
                  }
                }
                table += "</tbody></table>";
                return table;
              },
            },
            magicType: {
              type: ["line", "bar"],
              option: {
                type: "line",
              },
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: [
          {
            data: xData,
          },
        ],
        series: seriesTotal,
      };
      this.chartInstance.off("legendselectchanged"); //解决重复触发
      this.chartInstance.on("legendselectchanged", (params) => {
        var selected = params.selected;
        var name = params.name;
        // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event，导致本函数重复运行
        // 使得 无 selected 对象
        if (name == "全选" && params.selected.全选 == true) {
          //需要配置一个legend为‘全选’的名称
          selected = {
            全选: true,
            全不选: false,
            仓碎石1: true,
            仓碎石2: true,
            仓碎石3: true,
            仓碎石4: true,
            仓碎石5: true,
            仓碎石6: true,
            矿粉: true,
            沥青: true,
          };
        } else if (name == "全不选" && params.selected.全不选 == true) {
          selected = {
            全选: false,
            全不选: true,
            仓碎石1: false,
            仓碎石2: false,
            仓碎石3: false,
            仓碎石4: false,
            仓碎石5: false,
            仓碎石6: false,
            矿粉: false,
            沥青: false,
          };
        } else {
          if (
            selected.矿粉 == true &&
            selected.沥青 == true &&
            selected.仓碎石1 == true &&
            selected.仓碎石2 == true &&
            selected.仓碎石3 == true &&
            selected.仓碎石4 == true &&
            selected.仓碎石5 == true &&
            selected.仓碎石6 == true
          ) {
            selected.全选 = true;
            selected.全不选 = false;
          } else if (
            
            selected.矿粉 == false &&
            selected.沥青 == false &&
            selected.仓碎石1 == false &&
            selected.仓碎石2 == false &&
            selected.仓碎石3 == false &&
            selected.仓碎石4 == false &&
            selected.仓碎石5 == false &&
            selected.仓碎石6 == false
          ) {
            selected.全选 = false;
            selected.全不选 = true;
          } else {
            selected.全选 = false;
            selected.全不选 = false;
          }

          selected = params.selected;
        }
        this.$emit("clickLegend", selected);
      });
      this.dataOption = dataOption;
      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;
      //   和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
            // fontWeight: 500
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
    clear() {
      // 清空上次echart数据
      for (var i = 0; i < this.seriesData.length; i++) {
        //置空关键！！！  清空名字和数据
        this.seriesData[i].data = [];
        this.seriesData.name = "";
      }
      this.chartInstance = null;
      this.chartInstance = this.$echarts.init(this.$refs.echarts);
      this.chartInstance.setOption(this.dataOption); //重新setOption
      // this.legend=[]
    },
  },
};
</script>
  
<style lang="less" scope>
.com-chart::after {
  //     display: block;
  //     content: "123";
  //     position: absolute;
  //     left: 0;
  //     top: 0;
  //   width: 50px;
  //   height: 40px;
  //   border: 1px solid red;
  //   z-index: 9999;
}

.com-charts ::after {
  //   display: block;
  //   content: "123";
  //   position: absolute;
  //   transform: translate(-50%,-50%);
  //   left: 50%;
  //   top: 60%;
  // width: 47%;
  // height: 90%;

  // z-index: 9999;
}

/* echarts表格样式 */
.echartsTable {
  width: 100%;
  text-align: center;
  min-height: 25px;
  line-height: 25px;
  border-collapse: collapse;
  padding: 2px;
  font-size: 12px;
}

.echartsTable,
.echartsTable tr th,
.echartsTable tr td {
  // border: 1px solid gray;
  // flex: 1;
  border-bottom: 1px solid #dddddd;
  text-align: left;
  padding: 2px 5px;
}

.echartsTable .typeshi {
  width: 50%;
}

.echartsTable tr:nth-child(even) {
  border-bottom: 1px solid gray;
  background: #f9f9f9;
}
</style>
  